<template>
	<view>
		<view class="top" style="position: relative;">
			<view class="" style="width: 100%;position: absolute;left: 20rpx;top:20rpx;z-index: 1;" @click="back()">
				<image src="/static/back.png" mode="" style="width: 50rpx;height:50rpx"></image>
			</view>
			<map id="my_test_map" style="width: 750rpx; height: 540upx;z-index: 0;" :include-points='get_address'
				@markertap="check_market" :circles="circles" :scale="scale" @regionchange="regionchange"
				:markers='markers' :latitude="center_lat" :longitude="center_lng">
			</map>
		</view>
		<view class="bottom">
			<uni-section :title="'附近共'+this.shopnum+'家门店'" type="line">
				<view class="" v-for="item in shoplist">
					<uni-card :title="item.shopName" :sub-title="item.shopLocation" :extra="item.shopImg+'km'"
						:thumbnail="item.shopLogo" @click="goShop(item)">
						<button type="primary">{{item.state}}</button>
					</uni-card>
				</view>
			</uni-section>
			<p style="text-align: center;font-size: 14px;color: #CCCCCC;margin-top: 10rpx;">更多门店拓展中~</p>
			<u-modal :show="show" @confirm="confirm" @cancel="cancel" :showCancelButton="true" ref="uModal"
				:closeOnClickOverlay="true" width="600rpx" @close="show=false" :asyncClose="true" confirmText="立即下单"
				cancelText="联系门店">
				<uni-section :title="shopinfo.shopName" type="line" style="width:100%">
					<view class="" style="margin-top:15rpx;">
						<u-row customStyle="margin-bottom: 10px">
							<u-col span="7">
								<view class="demo-layout bg-purple-light">
									<image :src="shopinfo.shopLogo" style="width:250rpx;height:250rpx;"></image>
								</view>
							</u-col>
							<u-col span="4">
								<view class="demo-layout bg-purple">
									<p style="font-weight: bold;">{{shopinfo.shopLocation}}</p>
									<br>
									<p>{{shopinfo.longitude}}</p>
									<br>
									<p>{{shopinfo.thedimension}}</p>
								</view>
							</u-col>
						</u-row>


					</view>
				</uni-section>
			</u-modal>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				/* 地图参数 */
				id: 'mymap',
				center_lat: "",
				center_lng: "",
				markers: [],
				scale: 15,
				get_address: [],
				circles: [],

				/* 弹窗状态 */
				show: false,

				/* 用户id */
				userid: 0,

				/* 门店列表 */
				shoplist: [],
				/* 门店数量 */
				shopnum: 0,
				/* 门店详细信息 */
				shopinfo: {},
				/* 店铺id */
				shopid:0,
			}
		},
		onLoad() {
			/* 获取自身经纬度 */
			this.getJW()
			/* 获取用户id */
			this.getSession()
		},
		methods: {
			/* 返回上一级 */
			back(){
				uni.navigateBack({
					url:'/pages/jyy/HM-shophome'
				})
			},
			/*选择店铺 */
			goShop(item) {
				console.log(item)
				uni.navigateTo({
					url: '../zgd/stores_sub?item=' + JSON.stringify(item),
				})
			},
			/* 获取session 用户id */
			getSession() {
				uni.getStorage({
					key: 'userid',
					success: res => {
						this.userid = 1
					}
				})
				this.userid = 1
				console.log("用户id:" + this.userid)
			},
			/* 弹窗方法1 */
			/*  立即下单*/
			confirm() {
				for (var i = 0; i < this.shoplist.length; i++) {
					if(this.shoplist[i].id==this.shopid){
						uni.navigateTo({
							url: '../zgd/stores_sub?item=' + JSON.stringify(this.shoplist[i]),
						})
					}
				}
				this.show = false;
			},
			/* 联系门店 */
			cancel() {
				this.show = false
			},
			/* 获取经纬度 ，标记地图*/
			getJW() {
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: (res) => {
						console.log(res)
						this.center_lng = res.longitude
						this.center_lat = res.latitude
						this.change_markers()

					}
				})

			},
			/* 获取用户，店铺的经纬度 */
			change_markers() {
				//生成标记点
				var begin_markers = [{
					id: this.userid,
					latitude: this.center_lat,
					longitude: this.center_lng,
					iconPath: '../../static/mapshopyuan.png',
					width: 50,
					height: 50,
					title: '标注点A',
					callout: [{
						content: "tes****123456t",
						color: '#333',
						bgColor: "#fff",
						fontSize: '68',
						padding: '20upx',
						display: 'ALWAYS'
					}]
				}]
				this.$axios({
					url: "recycle/zgdshop/zgdGetAllShop",
					data: {
						longitu: this.center_lng,
						latitu: this.center_lat
					},
					method: 'GET',
					success: (res) => {
						this.shoplist = res.data.data.shops
						this.shopnum = this.shoplist.length
						for (var i = 0; i < res.data.data.shops.length; i++) {
							var a = {

								id: "shop-" + res.data.data.shops[i].id,
								latitude: res.data.data.shops[i].thedimension,
								longitude: res.data.data.shops[i].longitude,
								iconPath: "../../static/mapshop.png",
								width: 50,
								height: 50,
							}
							begin_markers.push(a)

						}
						console.log("开始执行地图标注");
						console.log(begin_markers)
						var now_address = [{
							id: this.userid,
							latitude: this.center_lat,
							longitude: this.center_lng,
							iconPath: "../../static/mapshopyuan.png",
							width: 50,
							height: 50
						}]
						//获取地图
						this.markers = now_address.concat(begin_markers);

						// this.circles = [{ //在地图上显示圆
						// 	latitude: this.center_lat,
						// 	longitude: this.center_lng,
						// 	fillColor: "#9db0de6A", //填充颜色
						// 	color: "#00aaff", //描边的颜色
						// 	radius: 100, //半径
						// 	strokeWidth: 1 //描边的宽度
						// }]
						//缩放视野以包含所有给定的坐标点
						this.get_address = [{
							latitude: this.center_lat,
							longitude: this.center_lng,
						}]

					}
				})

				//
				//this.$forceUpdate();
			},
			// 拖拽地图1
			regionchange(e) {
				console.log(e);

				var _that = this;
				_that.mainmap = uni.createMapContext('my_test_map', this);
				_that.mainmap.getCenterLocation({
					success(res) {
						var lat = res.latitude
						var lng = res.longitude
						//重设标记点
						_that.mainmap.translateMarker({
							markerId: 'begin',
							destination: {
								latitude: lat,
								longitude: lng
							},
							duration: 350,
							animationEnd() {
								console.log('设置');
							}
						})
					}
				})

			},
			//点击标记,查询门店
			check_market(e) {
				this.show = true;
				console.log(e.detail);
				this.$axios({
					url: "recycle/zgdshop/zgdGetFindShop",
					data: {
						longitu: this.center_lng,
						latitu: this.center_lat,
						id: e.detail
					},
					method: 'GET',
					success: (res) => {
						this.shopinfo = res.data.data.shop
						this.shopid=res.data.data.shop.id
						console.log("详细：" + res.data.data.shop.id)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.top {
		width: 100%;
		height: 50%;

	}

	.bottom {
		width: 100%;
		height: 50%;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
		border-radius: 20rpx;
	}

	.rect {
		width: 80%;
		height: 30%;
		background-color: #fff;
		border-radius: 20rpx;
	}
</style>
